<template>
  <div class="content-container">
    <el-row justify="space-between" class="dialog-table-filter">
      <div class="row-left">
        <!-- <DateTimeRange
          v-model="timePeriod"
          class="item"
          picker-type="2"
          :disabled-date="disabledDate"
        /> -->
        <el-button type="primary" @click="handleQuery">{{
          $t('public.search')
        }}</el-button>
        <!-- <el-button plain @click="handleReset">{{
          $t('public.reset')
        }}</el-button> -->
      </div>
    </el-row>
    <div class="base-table-container">
      <BaseTable
        ref="refContentTable"
        v-loading="loading"
        :data="tableData"
        row-key="id"
      >
        <TableColumn
          prop="status"
          :label="$t('fleet.orderStatus')"
          s
          :column-width="columnWidthObj.status"
        >
          <template #default="{ row }">
            <span
              class="dot-status"
              :class="
                g_options.getOptionText(
                  g_options.orderStatusOptions,
                  row.status,
                  '--',
                  'class'
                )
              "
              >{{
                g_options.getOptionText(
                  g_options.orderStatusOptions,
                  row.status,
                  '--'
                )
              }}</span
            >
          </template>
        </TableColumn>
        <TableColumn
          prop="customerName"
          :label="$t('fleet.customerName')"
          :column-width="columnWidthObj.customerName"
        />
        <TableColumn
          prop="departureDate"
          :label="$t('public.departureDate')"
          :column-width="columnWidthObj.departureDate"
        >
          <template #default="{ row }">
            <span>{{ g_dayjs(row.startTime).format('YYYY-MM-DD') }}</span>
          </template>
        </TableColumn>
        <TableColumn
          prop="startTime"
          :label="$t('fleet.departureTime')"
          :column-width="columnWidthObj.startTime"
        >
          <template #default="{ row }">
            <span>{{ g_dayjs(row.startTime).format('HH:mm:ss') }}</span>
          </template>
        </TableColumn>
        <TableColumn
          prop="startCity"
          :label="$t('public.startCity')"
          :column-width="columnWidthObj.startCity"
        >
          <template #default="{ row }">
            <span>{{ row.startCity || '--' }}</span>
          </template>
        </TableColumn>
        <TableColumn
          prop="startAddress"
          :label="$t('public.detailAddress')"
          :column-width="columnWidthObj.startAddress"
        />
        <TableColumn
          prop="region"
          :label="$t('fleet.tripSummary')"
          :column-width="columnWidthObj.region"
        >
          <template #default="{ row }">
            <el-tooltip
              :content="row.note || row.tripAbstract || '--'"
              placement="top"
              effect="dark"
            >
              <span class="twoEllipsis">
                {{ row.note || row.tripAbstract || '--' }}
              </span>
            </el-tooltip>
          </template>
        </TableColumn>
        <TableColumn
          prop="peopleCount"
          :label="$t('fleet.travelerCount')"
          :column-width="columnWidthObj.peopleCount"
        />
        <TableColumn
          prop="days"
          :label="$t('fleet.travelDays')"
          :column-width="columnWidthObj.days"
        />
        <TableColumn
          prop="remark"
          :label="$t('public.remark')"
          :column-width="columnWidthObj.remark"
        />
      </BaseTable>
      <BasePagination
        v-model:page-size="pageSize"
        v-model:current-page="pageNum"
        :total="total"
        @change="getTableList()"
      />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | view
  },
  vehicleId: {
    type: String,
    default: ''
  },
  orderId: {
    type: String,
    default: ''
  }
})

// const timePeriod = ref([])
const refContentTable = ref(null)
const loading = ref(false)
const tableData = ref([])
const columnWidthObj = ref({})
const total = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)

const getTableList = () => {
  loading.value = true
  tableData.value = []
  g_api.fleet
    .apiOrderList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      vehicleId: props.vehicleId,
      orderId: props.orderId
      // startTime: timePeriod.value[0] || '',
      // endTime: timePeriod.value[1] || ''
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        tableData.value = data.items
        total.value = data.total
        useTableColumnWidth({
          refTable: refContentTable.value
        }).getTableColumnWidth(data => {
          columnWidthObj.value = data
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

onMounted(() => {
  getTableList()
})

// const disabledDate = time => {
//   return false
// }

const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}

// const handleReset = () => {
//   timePeriod.value = []
//   handleQuery()
// }

defineExpose({
  refContentTable
})
</script>

<style lang="scss" scoped>
.content-container {
  height: 100%;
}
</style>
